<template>
    <div>
        <a-card class="searchForm mb-twelve">
            <a-form-model :model="searchForm" layout="inline" :colon="false">
                <a-form-model-item label="设备名称" prop="deviceName">
                    <a-input  v-model="searchForm.deviceName" style="color: #000" placeholder="请输入设备名称" />
                </a-form-model-item>
                <a-form-model-item>
                    <a-button @click="search" type="primary">查询</a-button>
                    <a-button @click="reset" class="btn-reset">重置</a-button>
                </a-form-model-item>
            </a-form-model>
        </a-card>
        <a-card>
            <div class="flex align-center justify-between flex-wrap card-hr">
                <div class="a-card-title">设备列表</div>
                <div>
                    <a-button type="danger" @click="del(null)" class="btn-danger">批量删除</a-button>
                    <a-button @click="handleOpen('')" type="primary" style="margin-left: 8px;">添加</a-button>
                </div>
            </div>
            <div class="mb-sixteen">
                <a-table bordered :rowKey="(record, index) => {
                return index;
            }
                " :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :columns="columns"
                    :data-source="list" :pagination="false" :scroll="{ x: '100%' }">
                    <template slot="action" slot-scope="text,record">
                        <a-button @click="handleOpen(record)" type="link"> 编辑 </a-button>
                        <a-button type="link" @click="del(record)" style="color: #F64646;"> 删除 </a-button>
                    </template>
                </a-table>

            </div>
            <div class="text-right" v-if="total > 0">
                <a-pagination :total="total" :current="searchForm.page" :page-size.sync="searchForm.pageSize"
                    :page-size-options="$pageSizeOptions" @change="handlePageNo" @showSizeChange="showSizeChange"
                    show-size-changer />
            </div>
        </a-card>

        <a-modal :title="title" v-model="visible" :maskClosable="false" :width="590" centered :footer="null">
            <div>
                <a-form-model ref="ruleForm" :model="form" :rules="rules" :colon="false" :label-col="{ span: 6 }"
                    :wrapper-col="{ span: 16 }">
                    <a-form-model-item label="设备名称" prop="deviceName">
                        <a-input v-model="form.deviceName" placeholder="请输入设备名称" />
                    </a-form-model-item>
                    <a-form-model-item label="视频流地址" prop="address">
                        <a-input v-model="form.address" placeholder="请输入视频流地址" />
                    </a-form-model-item>

                </a-form-model>
                <div class="flex align-center justify-center">
                    <a-button @click="visible = false"
                        style="margin-left: 8px;background: #fff;color: #2C3360;border-color: #fff;margin-right: 15px">取消</a-button>
                    <a-button @click="submit" type="primary">确定</a-button>
                </div>
            </div>
        </a-modal>
    </div>
</template>

<script>
import {dataSource as ds} from "@/services";

const columns = [
    {
        title: '设备名称',
        dataIndex: 'deviceName',
    },
    {
        title: '视频流地址',
        dataIndex: 'address',
    },

    {
        title: '操作',
        scopedSlots: { customRender: 'action' },
    }
]
export default {
    name: "monitorDevice",
    data() {
        return {
            columns,
            list: [],
            selectedRowKeys: [],

            searchForm: {
                page: 1,
                pageSize: 15
            },
            total: 20,
            visible: false,
            title: '添加设备',
            form: {
              deviceName: '',
                address: "",
            },
            rules: {
              deviceName: [
                    { required: true, message: '请输入设备名称', trigger: 'blur' },
                ],
                address: [
                    { required: true, message: '请输入视频流地址', trigger: 'blur' },
                ],

            }
        }
    },
  mounted() {
    this.getData();
  },
    methods: {
      //提交
      submit(){
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            if(this.title=='编辑设备'){

              ds.submitpost(this.form).then(res => {
                console.log(res);
                this.$message.success('提交成功')
                this.visible=false;
                this.getData()
              })
            }else {
              ds.submitpost(this.form).then(res => {
                console.log(res)
                this.$message.success('提交成功')
                this.visible=false;
                this.getData()
              })
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });

      },
      //删除
      del(row){
        let that=this;
        let ids='';
        if(!row){
          if(this.selectedRowKeys.length){
            let list=[];
            for(let i in this.selectedRowKeys){
              list.push(this.selectedRowKeys[i].id)
            }
            ids=list.join(',')
          }else {
            that.$message.success('请选择删除项');
            return
          }
        }else {
          ids=row.id
        }

        this.$confirm({
          content: '是否确定删除',
          onOk() {
            ds.delpost({ ids:ids }).then(res => {
              console.log(res)
              that.$message.success('删除成功');
              that.getData();
            })
          }
        });
      },
      //搜索
      search(){
        this.searchForm.page=1;
        this.getData()
      },
      //重置
      reset(){
        this.searchForm={
          page: 1,
          pageSize: 15
        }
        this.getData()
      },
      getData() {
        let data=this.searchForm;
        console.log(data)
        this.list=[]
        ds.monitorList(data).then(res => {
          console.log(res)
          this.list = res.data.data.list
          this.total = res.data.data.total
        })
      },
        handleOpen(row) {
            console.log(row)
          if(row){
            this.visible = true
            this.form =Object.assign({}, row);
            this.title = row ? '编辑设备' : '添加设备'
          }else {
            this.visible = true
            this.form={}
            this.title = row ? '编辑设备' : '添加设备'
          }

        },
        onSelectChange(selectedRowKeys) {
            console.log('selectedRowKeys changed: ', selectedRowKeys);
            this.selectedRowKeys = selectedRowKeys;
        },
        showSizeChange(current, pageSize) {
            this.searchForm.pageSize = pageSize
          this.getData();
        },
        handlePageNo(current) {
            this.searchForm.page = current
          this.getData();
        },
    }
}
</script>
<style scoped lang="less">
/deep/.ant-pagination-prev .ant-pagination-item-link,
.ant-pagination-next .ant-pagination-item-link {
    background-color: #42487A;
    border-color: #999da0;
    color: #898a94;
}

/deep/.ant-pagination-next .ant-pagination-item-link {
    background-color: #42487A;
    border-color: #999da0;
    color: #898a94;
}

/deep/ .ant-pagination-item {
    background-color: #42487A;
    border-color: #999da0;

}

/deep/ .ant-pagination-item a {
    color: #898a94;
}

/deep/ .ant-pagination-item-active {
    border-color: #fff;
}

/deep/ .ant-pagination-item-active a {
    color: #fff;
}

/deep/ .ant-select-selection {
    background-color: #42487A;
    border-color: #999da0;
    color: #898a94;
}
</style>
